<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页脚回调</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.css"/>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.js"></script>

    <style>
        th { white-space: nowrap; }
    </style>
    <script>
        $(document).ready(function() {
      var table=      $('#example').DataTable( {
                "footerCallback": function ( row, data, start, end, display ) {

                    var api = this.api(),           //得到  datatable 对象    即   table    是一样的
                        data;

                    // Remove the formatting to get integer data for summation      替换非数字符号
                    var intVal = function ( i ) {
                        return typeof i === 'string' ?
                            i.replace(/[\$,]/g, '')*1 :
                            typeof i === 'number' ?
                                i : 0;
                    };

                    // 求总和
                    total = api
                        .column( 4 )
                        .data()                                    //  拿到第四列数据  是一个 数组
                        .reduce( function (a, b) {                 //js    reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。对空数组是不会执行回调函数的。
                            return intVal(a) + intVal(b);           //   return total + Math.round(num);//对数组元素四舍五入并计算总和
                        }, 0 );

                    // 当前页求和
                    pageTotal = api
                        .column( 4, { page: 'current'} )
                        .data()
                        .reduce( function (a, b) {
                            return intVal(a) + intVal(b);
                        }, 0 );

                    // Update footer
                    $( '#footer').html(

                        '$'+pageTotal +' ( $'+ total +' total)'
                    );
                }
            } );
        } );
    </script>
</head>
<body>
<table id="example" class="display" style="width:100%">
    <thead>
    <tr>
        <th>First name</th>
        <th>Last name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Salary</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Tiger</td>
        <td>Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>$320,800</td>
    </tr>
    <tr>
        <td>Garrett</td>
        <td>Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>$170,750</td>
    </tr>
    <tr>
        <td>Ashton</td>
        <td>Cox</td>
        <td>Junior Technical Author</td>
        <td>San Francisco</td>
        <td>$86,000</td>
    </tr>
    <tr>
        <td>Cedric</td>
        <td>Kelly</td>
        <td>Senior Javascript Developer</td>
        <td>Edinburgh</td>
        <td>$433,060</td>
    </tr>
    <tr>
        <td>Airi</td>
        <td>Satou</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>$162,700</td>
    </tr>
    <tr>
        <td>Brielle</td>
        <td>Williamson</td>
        <td>Integration Specialist</td>
        <td>New York</td>
        <td>$372,000</td>
    </tr>
    <tr>
        <td>Herrod</td>
        <td>Chandler</td>
        <td>Sales Assistant</td>
        <td>San Francisco</td>
        <td>$137,500</td>
    </tr>
    <tr>
        <td>Rhona</td>
        <td>Davidson</td>
        <td>Integration Specialist</td>
        <td>Tokyo</td>
        <td>$327,900</td>
    </tr>
    <tr>
        <td>Colleen</td>
        <td>Hurst</td>
        <td>Javascript Developer</td>
        <td>San Francisco</td>
        <td>$205,500</td>
    </tr>
    <tr>
        <td>Sonya</td>
        <td>Frost</td>
        <td>Software Engineer</td>
        <td>Edinburgh</td>
        <td>$103,600</td>
    </tr>
    <tr>
        <td>Jena</td>
        <td>Gaines</td>
        <td>Office Manager</td>
        <td>London</td>
        <td>$90,560</td>
    </tr>
    <tr>
        <td>Quinn</td>
        <td>Flynn</td>
        <td>Support Lead</td>
        <td>Edinburgh</td>
        <td>$342,000</td>
    </tr>
    <tr>
        <td>Charde</td>
        <td>Marshall</td>
        <td>Regional Director</td>
        <td>San Francisco</td>
        <td>$470,600</td>
    </tr>
    <tr>
        <td>Haley</td>
        <td>Kennedy</td>
        <td>Senior Marketing Designer</td>
        <td>London</td>
        <td>$313,500</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <th colspan="4" style="text-align:right"  >Total:</th>
        <th id="footer"></th>
    </tr>
    </tfoot>
</table>
</body>
</html>